<template>
  <el-card class="welcome-card" shadow="hover">
    <div class="welcome-content">
      <div class="welcome-text">
        <h2>欢迎回来，尊敬的客户</h2>
        <p>快速查看您的订单状态或创建新的物流订单</p>
      </div>
      <div class="action-buttons">
        <el-button type="primary" @click="$router.push('/createOrder')">
          <el-icon><Plus /></el-icon>创建新订单
        </el-button>
        <el-button @click="$router.push('/map')">
          <el-icon><Location /></el-icon>追踪订单
        </el-button>
      </div>
    </div>
  </el-card>
</template>

<script setup lang="ts">
import { Plus, Location } from '@element-plus/icons-vue'
</script>

<style scoped>
.welcome-card {
  background: linear-gradient(135deg, #409EFF 0%, #3178C6 100%);
  color: white;
  border: none;
}

.welcome-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.welcome-text h2 {
  margin: 0 0 10px 0;
  font-size: 24px;
}

.welcome-text p {
  margin: 0;
  opacity: 0.8;
}

.action-buttons {
  display: flex;
  gap: 12px;
}

@media (max-width: 768px) {
  .welcome-content {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
}
</style>